import React from 'react';
import {TabBar} from 'antd-mobile';
import './index.css'
import HomeTab from './home/index'
import CartTab from './cart/index'
import ProductTab from './product/index'
import MeTab from './me/index'
import {connect} from "react-redux";
import {main as mainAction} from '../redux/actions/actionCreators'

const BottomIcon = ({className, selected = false}) => {

    const styles = {fontSize: 30};

    if (selected === true) {
        styles.color = '#302F34';
    }

    return (
        <i className={`iconfont ${className}`} style={styles}/>
    );
};

class TabBarExample extends React.Component {

    componentDidUpdate() {
        console.log('render');
    }

    render() {
        const {main: {selectedTab}, changeTab} = this.props;
        return (
            <div style={{position: 'fixed', height: '100%', width: '100%', top: 0, backgroundColor: 'white'}}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    prerenderingSiblingsNumber={0}
                >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<BottomIcon className={"icon-home-fill"}/>}
                        selectedIcon={<BottomIcon className={"icon-home-fill"} selected={true}/>}
                        selected={selectedTab === 'home'}
                        onPress={() => {
                            changeTab('home');
                        }}
                    >
                        <HomeTab/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<BottomIcon className={"icon-shopping-fill"}/>}
                        selectedIcon={<BottomIcon className={"icon-shopping-fill"} selected={true}/>}
                        title="购物车"
                        key="cart"
                        selected={selectedTab === 'cart'}
                        onPress={() => {
                            changeTab('cart');
                        }}
                    >
                        <CartTab/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<BottomIcon className={"icon-database-fill"}/>}
                        selectedIcon={<BottomIcon className={"icon-database-fill"} selected={true}/>}
                        title="商品"
                        key="order"
                        selected={selectedTab === 'order'}
                        onPress={() => {
                            changeTab('order');
                        }}
                    >
                        <ProductTab/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<BottomIcon className={"icon-user"}/>}
                        selectedIcon={<BottomIcon className={"icon-user"} selected={true}/>}
                        title="我的"
                        key="me"
                        selected={selectedTab === 'me'}
                        onPress={() => {
                            changeTab('me');
                        }}
                    >
                        <MeTab/>
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}


const mapDispatchToProps = (dispatch) => { // 默认传递参数就是dispatch
    return {
        changeTab: (tab) => {
            dispatch(mainAction.changeTab(tab));
        },
    };
};
export default connect((state) => ({
    main: state.main
}), mapDispatchToProps)(TabBarExample)
